.faceBody {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: url('~@/assets/img/face/facebg.png') center center / auto no-repeat rgb(0, 0, 0);
  padding-top: 1px;
  overflow: hidden;

  .faceContent {
    width: 1200px;
    padding: 60px 0;
    transform: scale(1);
    transform-origin: 50% 0;
    position: relative;
    left: 50%;
    margin: 0 auto 0 -600px;

    .header {
      font-size: 30px;
      font-family: PingFangSC;
      font-weight: 500;
      color: #fff;
      line-height: 42px;
      display: flex;
      justify-content: space-between;
      .hd-title{
        color: #A1D9FF;
      }
      .facePaner {
        display: inline-block;
        margin-left: 30px;
        overflow: hidden;
        border-radius: 2px;
        position: relative;
        top: 5px;

        .type {
          width: 106px;
          height: 28px;
          line-height: 28px;
          border: 1px solid #3155B0;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #3155B0;
          float: left;
          cursor: pointer;
      
        }

        .active {
          color: #46F4F6;
          // background: #fc5841;
          // border-left: none;
          // border-top: none;
          // border-bottom: none;
        }
      }
    }

    .center {
      margin-top: 60px;
      height: 580px;
      .faceDetect {
        border: 1px solid #273D72;
        position: relative;
        width: 890px;
        height: 580px;
        float: left;
        .faceBox {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 10;
          overflow: hidden;
          .bag {
            width: 100%;
            height: 100%;
            background: #101532;
            padding-top: 1px;

            .box {
              width: 460px;
              height: 490px;
              margin: 45px auto;
              text-align: center;
              position: relative;
              display: flex;
              align-items: center;
              flex-direction: column;
              // align-items: center;
              // .imgBar {
              //   width: 532px;
              //   height: 23px;
              //   position: absolute;
              //   top: 50%;
              //   margin-top: -8px;
              //   left: -36px;
              // }

              // img {
              //   display: block;
              //   width: 100%;
              //   height: 100%;
              // }

              button {
                width: 181px;
                height: 40px;
                background: #fc5841;
                border-radius: 2px;
                text-align: center;
                font-size: 14px;
                line-height: 40px;
                color: #fff;
                cursor: pointer;
                margin-top: 50px;
                border: 0;
                // position: absolute;
                // bottom: 0;
                // left: 50%;
                // margin-left: -90px;
              }
            }
          }
          .noPadding{
            padding-top: 0;
          }
        }
      }
      .rightBox {
        width: 280px;
        height: 580px;
        background: #101532;
        border: 1px solid #273D72;
        margin-left: 30px;
        float: left;
        padding: 10px;
        overflow: auto;
        position: relative;
        overflow-x: hidden;
        .title {
          color: #FFFFFF;
          font-size: 16px;
          font-weight: 400;
          padding-bottom: 10px;
          border-bottom: 1px solid #273D72;
        }
        .list {
          height: 430px;
          overflow: auto;
        }
        .nostart {
          position: absolute;
          top: 270px;
          width: 270px;
          text-align: center;
          font-weight: 400;
          color: #3155B0;
        }
      }
    }
  }

  .rule {
    margin-top: 50px;
    font-weight: 500;
    color: #333;

    .title_rule {
      font-weight: 700;
      margin-bottom: 8px;

      a {
        display: inline-block;
        color: #fff;
        padding: 0 5px;
        background-color: #1890ff;
        margin-right: 8px;
      }
    }
  }
}
.stopBtn{
    width: 120px;
    height: 40px;
    background: #fc5841;
    border: 1px solid #fc5841;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    color:white;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%,0);
}
// .camera_outer{
//     position: relative;
//     overflow: hidden;
//     background-size: 100%;
//     video,canvas,.tx_img{
//       -moz-transform:scaleX(-1);
//       -webkit-transform:scaleX(-1);
//       -o-transform:scaleX(-1);
//       transform:scaleX(-1);
//     }
//     .btn_camera{
//       position: absolute;
//       bottom: 4px;
//       left: 0;
//       right: 0;
//       height: 50px;
//       background-color: rgba(0,0,0,0.3);
//       line-height: 50px;
//       text-align: center;
//       color: #ffffff;
//     }
//     .bg_r_img{
//       position: absolute;
//       bottom: 0;
//       left: 0;
//       right: 0;
//       top: 0;
//     }
//     .img_bg_camera{
//       position: absolute;
//       bottom: 0;
//       left: 0;
//       right: 0;
//       top: 0;
//       img{
//         width: 100%;
//         height: 100%;
//       }
//       .img_btn_camera{
//         position: absolute;
//         bottom: 0;
//         left: 0;
//         right: 0;
//         height: 50px;
//         line-height: 50px;
//         text-align: center;
//         background-color: rgba(0,0,0,0.3);
//         color: #ffffff;
//         .loding_img{
//           width: 50px;
//           height: 50px;
//         }
//       }
//     }
//   }